<template>
  <!-- 商品详情页 -->
  <div class="MobileShop">
    <!-- 布局盒子 头部商品挑选-->
    <div class="selectShops">
      <!-- 商品居中盒子 -->
      <div class="selectShopsBox">

        <div class="shopHeader">
          {{good.name}}
        </div>
        <!-- 商品具体内容 -->
        <div class="shopContent common1">
          <!-- 左面轮播图 -->
          <div class="contentLeft">
            <image-zoomer :src="currentImg" :width="400" :height="400" class="bigImg"> </image-zoomer>
            <div class="tabs">
              <div v-for="img in goodphotos" :key="img.id" class="imgBox">
                <img :src="img.path" alt="" @mouseover="changeImg">
              </div>
            </div>

          </div>

          <!--  商品选择-->
          <div class="contentRight">
            <h1>{{good.name}}</h1>
            <h1>{{good.desc}}</h1>
            <h6>库存:{{good.stock_num}}</h6>
            <div class="price">
              <h5>价格<span>&yen;{{(1*good.price).toFixed(2)}}</span></h5>
              <h6>促销<span>购买即赠送商品积分积分可抵现</span></h6>
            </div>
            <hr />
            <div class="serve">
              <hr />
              <h5>服务说明<span>预计2022-10-30钱完成发货</span></h5>
            </div>
            <div class="selectItem ">
              <p>选择颜色</p>
              <ul class="colorRight common1">
                <li> 曜金黑</li>
                <li> 冰霜银 </li>
                <li> 流光紫 </li>
                <li> 昆仑破晓 </li>
                <li> </li>
              </ul>
            </div>
            <div class="selectItem ">
              <p>选择版本</p>
              <ul class="colorRight common1">
                <li>512GB</li>
                <li>256GB</li>

              </ul>
            </div>
            <div class="selectItem ">
              <p>选择套餐</p>
              <ul class="colorRight common1">
                <li>官方标配(含充电头套装)</li>
              </ul>
            </div>
            <div class="selectItem ">
              <p>保障服务</p>
              <ul class="colorRight common1">
                <li>碎屏服务包2年-赠送1年延保¥799</li>
                <li>碎屏服务包1年</li>
                <li>华为延长服务宝¥468</li>

              </ul>
            </div>

            <div class="joinCart">
              <button @click="add" :disabled="n===5896">+</button>
              <span>{{this.n}}</span>
              <button @click="increase" :disabled="n===0">-</button>
              <button class="cart" @click="goCard">
                加入购物车
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="shopDetail">
      <div class="shopDetailHeader container">
        <ul class="common1 container">
          <li>商品详情</li>
          <li>规格参数</li>
          <li>包装与售后</li>
          <li>用户评价(999+)</li>
        </ul>
      </div>
      <!-- rich_text是一个html结构的字符串 -->
      <div v-html="good.rich_text" class="imagesBox">


      </div>

    </div>
  </div>
</template>
  
<script>
import ImageZoomer from "ht-image-zoomer";
import { getLunbo, getGood, addCart } from "@/assets/request.js"
export default {
  name: "Del",
  props: [],
  components: {
    ImageZoomer,
  },
  data() {
    return {

      //商品件数
      n: 1,

      //存放多个商品
      goods: [],
      //id 存放你点击的某个商品的id
      good: [],
      //商品的图片数组
      goodphotos: [],
      //当前展示轮播的图片
      currentImg: "",

    }

  },

  methods: {

    async goCard() {
      //判断用户是否登陆,并给出提示信息 跳转到正确页面
      if (sessionStorage.getItem("token")) {
         //添加 // 到购物车
         let cart = await addCart({
        project_id: 260,
        num: this.n,
        goods_id: this.$route.params.id,
      })
        this.$message({
          message: "加入购物车成功",
          type: "success",
          duration: 800,
        })
        //跳转到购物车
        this.$router.push({
          name: "cart",
        })
      } else {
        this.$message({
          message: "你需要登陆",
          type: "warning",
          duration: 800,
        })
        this.$router.push({
          name: "login",
        })
      }

       


      // console.log(cart);


    },
    add() {
      this.n++;
    },
    increase() {
      this.n--;
    },
    changeImg(e) {

      this.currentImg = e.target.src;
    }

  },
  async mounted() {
    //获取商品
    let res = await getGood(
      this.$route.params.id,

    );
    //console.log(res);
    this.good = res.data.result;
    this.goodphotos = res.data.result.s_goods_photos;
    this.currentImg = this.goodphotos[0].path;


    //console.log(this.good);
    // console.log(this.good.s_goods_photos[0].path);





  },
}

</script>
  
<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

.MobileShop {
  overflow: hidden;
  width: get(1920);
  margin-top: get(160);

  //background-color: $color1;
  //布局盒子 头部商品挑选
  >.selectShops {
    width: get(1920);

    //商品居中盒子
    >.selectShopsBox {
      overflow: hidden;
      @extend.container;

      //头部一引导路由页面
      >.shopHeader {
        text-align: left;
      }

      //具体内容
      >.shopContent {
        justify-content: space-around;
        width: get(1500);
        margin-top: get(20);

        //左边轮播图待定
        >.contentLeft {

          width: get(560);
          height: get(660);

          //background-color: pink;
          >.tabs {
            margin: 0 auto;
            margin-top: get(10);
            width: get(500);
            height: get(100);
            display: flex;
            justify-content: space-between;

            >.imgBox {
              border: 1px solid #000;
              margin-right: get(2);

            }
          }
        }

        //选择商品各项属性
        >.contentRight {
          overflow: hidden;
          width: get(800);
          //height: get(660);
          text-align: left;
          //margin-right: get(100);

          >h1 {
            margin-top: get(2);
            margin-bottom: get(12);
            font-size: get(24);
          }

          >h6 {
            opacity: .5;
          }

          >.price {
            margin-top: get(10);
            overflow: hidden;
            width: get(800);
            padding-left: get(6);
            background-color: $color1;

            >h5 {
              font-size: get(18);
              font-weight: 400;
              margin-top: get(10);

              span {
                margin-left: get(10);
                color: $color;
                font-size: get(24);
              }
            }

            >h6 {
              font-size: get(18);
              font-weight: 400;
              margin-top: get(4);
              margin-bottom: get(4);

              span {
                margin-left: get(4);
              }
            }
          }

          >.serve {

            margin-top: get(4);

            h5 {
              font-weight: 340;
            }
          }

          >.selectItem {
            margin-top: get(4);

            //width: get(400);
            >p {
              font-size: get(20);
              margin-bottom: get(18);
            }

            >.colorRight {
              margin-top: get(6);
              //margin-right: get(320);
              justify-content: flex-start;

              >li {
                margin: 0 get(6);
                padding: 0 0;
                border: 1px solid #000;
                font-size: get(18);

                input {
                  width: get(80);

                  &:focus {
                    border: 1px solid $color;
                  }
                }

              }
            }
          }

          >.joinCart {
            margin-top: get(20);

            >button {
              width: get(40);
              margin: 0 get(10);

              &:nth-child(4) {
                height: get(50);
                background-color: #fff;

                border: 1px solid $color;
                border-radius: get(40);

                &:hover {
                  color: #fff;
                  background-color: $color;
                }
              }
            }

            >.cart {
              margin-left: get(20);
              width: get(150);
              height: get(60);
            }
          }

        }
      }
    }
  }

  >.shopDetail {
    margin-top: get(60);
    border: 1px solid #000;

    >.shopDetailHeader {
      width: get(1920);
      height: get(100);
      background-color: $color1;
      display: flex;
      align-items: center;

      //margin-top: get(60);
      >ul {
        justify-content: space-around;

        >li {
          font-size: get(22);
          font-weight: 600;

          &:hover {
            color: $color;
          }
        }
      }
    }
  }
}
</style>
  
